<!DOCTYPE html>
<html lang="en">
	<head>
		   
		<meta charset="UTF-8">
		   
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		    <title>Document</title>
		    <style>
			/* Tooltip container */
			.tooltip {
			  position: relative;
			  display: inline-block;
			  border-bottom: 1px dotted black; /* 可选的下划线提示 */
			}
			 
			/* Tooltip text */
			.tooltip .tooltiptext {
			  visibility: hidden;
			  width: 500px;
			  background-color: black;
			  color: #fff;
			  text-align: center;
			  border-radius: 6px;
			  padding: 5px 0;
			 
			  /* 位置 */
			  position: absolute;
			  z-index: 1;
			  top: 100%;
			  left: 50%;
			  margin-left: -60px;
			 
			  /* 动画 */
			  opacity: 0;
			  transition: opacity 0.3s;
			}
			 
			/* 鼠标悬浮时显示工具提示 */
			.tooltip:hover .tooltiptext {
			  visibility: visible;
			  opacity: 1;
			}
		</style>
	</head>
	<body>
		<div class="tooltip">
		  Hover over me
		  <span class="tooltiptext">Tooltip text
			<div>
				<h3>最现实的例子</h3>
				<p>尽管美西方一直对我们走的发展道路各种否定抨击，可我们一直坚持走符合中国国情的道路。
				<br/>特别是改革开放以来，我们坚持走具有中国特色的社会主义道路，不断深化改革。</p>
				<button>确认</button>
			</div>
		  </span>
		</div>
<script>
			
</script>
	</body>
</html>